<template>
	<view v-cloak>
		<!-- #ifndef MP-WEIXIN -->
		<!-- <u-navbar :autoBack="true" bgColor="#fff" :placeholder="true" :fixed="true">
			<view slot="center" >
				<view class="display-flex toonei">
					<image :src="(conversationActive.user && conversationActive.user.pic) | formatImgUrl"
						class="headpic" mode=""></image>
					<view class="tocen">
						<view class="totop">
							<view class="name">
								{{conversationActive.user.username}}
							</view>
							<image
								:src="$options.filters.formatImgUrl(conversationActive.user.writer_level.is_active?conversationActive.user.writer_level.level.image:conversationActive.user.writer_level.level.hide_img)"
								@click="$go('/pages/user/grade?uid='+conversationActive.user.membe_id)"
								class="jipic" mode=""
								v-if="conversationActive.user && conversationActive.user.is_writer">
							</image>
							<image
								:src="$options.filters.formatImgUrl(conversationActive.user.user_level.active_day>0?conversationActive.user.user_level.level.image:conversationActive.user.user_level.level.hide_img)"
								class="biepic" mode=""
								v-if="conversationActive.user.is_vip&&conversationActive.user.user_level.is_active">
							</image>
						</view>
						<view class="display-flex">
							<view class="dian"></view>
							<view class="txt">
								当前在线
							</view>
						</view>
					</view>
				</view>
			</view>
			<view slot="right" class="display-flex" style="position: relative;">
				<text style="width: 102rpx;height: 40rpx;border-radius: 25px;text-align: center;line-height: 40rpx;color: #45C4B0;font-size: 20rpx;background: #E3F6F3;">关注</text>
				<image :src="'/images/bao.png' | formatImgUrl" mode="aspectFit" style="width: 24px;height: 24px;margin-left: 5rpx;" @click="$go('/pages/tim/userinfo?id='+conversationActive.user.membe_id)"></image>
			</view>
		</u-navbar> -->
		<!-- #endif -->
		
		<view class="content" @touchstart="hideDrawer"
			:style="orderList.length?(toUserId === 'administrator'||toUserId === 'hudongmsg'||toUserId === 'pinglunmsg'?'padding-bottom:0px !important':''):''">

			<swiper
				v-if="toUserId !== 'administrator' && toUserId !== 'hudongmsg' && toUserId !== 'pinglunmsg'  && orderList.length"
				class="topSwiper">
				<!-- 用户 -->
				<swiper-item v-for="(item,index) in orderList" :key="index">
					<view class="toobox">
						<view class="toonei">

							<!-- 我是用户 -->
							<image @click="$go('/pages/my/my?id='+item.writer_uid)"
								:src="(item.writer && item.writer.pic) | formatImgUrl" class="headpic" mode=""
								v-if="item.uid == userInfo.membe_id"></image>

							<!-- 我是写手？ -->
							<image @click="$go('/pages/my/my?id='+item.uid)"
								:src="(item.user && item.user.pic) | formatImgUrl" class="headpic" mode=""
								v-if="item.writer_uid == userInfo.membe_id"></image>

							<view class="tocen">
								<!-- 用户身份显示写手信息 -->
								<view class="totop" v-if="item.uid == userInfo.membe_id">
									<view class="name">
										{{item.writer.username || ''}}
									</view>
									<image
										:src="$options.filters.formatImgUrl(item.writer.writer_level.is_active?item.writer.writer_level.level.image:item.writer.writer_level.level.hide_img)"
										@click="$go('/pages/user/grade?uid='+item.writer.membe_id)" class="jipic"
										mode=""
										v-if="item.writer && item.writer.is_writer && item.writer.writer_level && item.writer.writer_level.level">
									</image>

									<image
										:src="$options.filters.formatImgUrl(item.writer.user_level.active_day>0? (item.writer && item.writer.user_level && item.writer.user_level.level && item.writer.user_level.level.image) :(item.writer &&item.writer.user_level &&item.writer.user_level.level &&item.writer.user_level.level.hide_img))"
										class="biepic" mode=""
										v-if="item.writer.is_vip && item.writer.user_level.is_active">
									</image>


								</view>

								<!-- 写手身份显示用户信息 -->
								<view class="totop" v-if="item.writer_uid == userInfo.membe_id">
									<view class="name">
										{{item.user.username || ''}}
									</view>
									<image
										:src="$options.filters.formatImgUrl(item.user.writer_level.is_active?item.user.writer_level.level.image:item.user.writer_level.level.hide_img)"
										@click="$go('/pages/user/grade?uid='+item.user.membe_id)" class="jipic" mode=""
										v-if="item.user && item.user.is_writer && item.user.writer_level.level">
									</image>
									<image
										:src="$options.filters.formatImgUrl(item.user && item.user.user_level && item.user.user_level.active_day? ( item.user&& item.user.user_level&& item.user.user_level.level && item.user.user_level.level.image):(item.user&& item.user.user_level && item.user.user_level.level && item.user.user_level.level.hide_img))"
										class="biepic" mode=""
										v-if="item.user.is_vip && item.user.user_level.is_active">
									</image>
								</view>
								<view class="yuan">
									{{item.price || ''}}
									<text>币/{{item.num || ''}}{{item.c_word_count || ''}}</text>
								</view>
							</view>

							<view class="toyou">
								<view class="flexend">
									<image :src="'/images/she.png' | formatImgUrl"
										@click="$go('/pages/tim/userinfo?id='+conversationActive.user.membe_id)"
										class="pic" mode=""></image>
								</view>
								<view class="yue" @click="$go('/pages/user/orderdetail?id='+item.id)"
									v-if="item.uid == userInfo.membe_id || (item.writer_uid == userInfo.membe_id && item.status > 1)">
									详情
								</view>
								<view class="yue" @click="$go('/pages/my/connect?id='+item.id)"
									v-if="item.writer_uid == userInfo.membe_id && item.status == 1">
									接单
								</view>
							</view>
						</view>

						<!-- 进行中 -->
						<!-- <view class="jietxt" v-if="showbox == 2">
							距离截稿日期还有1天
						</view> -->

						<view class="buzhou">
							<view class="new-step-box" v-if=" item.ref_status_fb == 2 && item.status == 3">
								<view class="new-step-top display-flex">
									<block v-for="(it,ix) in endStatusList" :key="ix">
										<view class="circle"
											:class="{'pass': ix < 3,'stop': ix == 3 || ix == 4}">
											<text></text>
										</view>
										<text class="line" style="width: 120rpx;" v-if="ix < endStatusList.length - 1"
											:class="{'activeLine' : ix < 2,'stopLine': ix == 2,'stopLine3': ix == 3}"></text>
									</block>
								</view>
								<view class="new-step-bot display-flex">
									<block v-for="(it,ix) in endStatusList" :key="ix">
										<text
											:class="{'pass' : ix < 3,'stop': ix == 3 || ix == 4}">
											<block v-if="item.status == 3 && ix == 3">退款中</block>
											<block v-else-if="ix == 4">已退款</block>
											<block v-else>{{it}}</block>
										</text>
									</block>
								</view>
							</view>
							<view class="new-step-box" v-else-if=" item.ref_status_fb == 2 && item.status == 2">
								<view class="new-step-top display-flex">
									<block v-for="(it,ix) in endStatusList2" :key="ix">
										<view class="circle"
											:class="{'pass': ix < 3,'stop': ix == 2 || ix == 3}">
											<text></text>
										</view>
										<text class="line" style="width: 170rpx;" v-if="ix < endStatusList2.length - 1"
											:class="{'activeLine' : ix < 1,'stopLine': ix == 1,'stopLine3': ix == 2}"></text>
									</block>
								</view>
								<view class="new-step-bot display-flex">
									<block v-for="(it,ix) in endStatusList2" :key="ix">
										<text
											:class="{'pass' : ix < 3,'stop': ix == 2 || ix == 3}">
											<block >{{it}}</block>
										</text>
									</block>
								</view>
							</view>
							
							<view class="new-step-box" v-else-if=" item.status == 5 && item.is_acceptance == 1 && item.ss_status == 2">
								<view class="new-step-top display-flex">
									<block v-for="(it,ix) in endStatusList3" :key="ix">
										<view class="circle"
											:class="{'pass': ix < 3,'stop': ix == 2 || ix == 3}">
											<text></text>
										</view>
										<text class="line" style="width: 170rpx;" v-if="ix < endStatusList3.length - 1"
											:class="{'activeLine' : ix < 1,'stopLine': ix == 1,'stopLine3': ix == 2}"></text>
									</block>
								</view>
								<view class="new-step-bot display-flex">
									<block v-for="(it,ix) in endStatusList3" :key="ix">
										<text
											:class="{'pass' : ix < 3,'stop': ix == 2 || ix == 3}">
											<block >{{it}}</block>
										</text>
									</block>
								</view>
							</view>
							<view class="new-step-box" v-else-if=" item.status == 5 && item.is_acceptance == 1 && item.ss_status == 3">
								<view class="new-step-top display-flex">
									<block v-for="(it,ix) in endStatusList4" :key="ix">
										<view class="circle"
											:class="{'pass': ix < 3,'stop': ix == 4 || ix == 3}">
											<text></text>
										</view>
										<text class="line" style="width: 120rpx;" v-if="ix < endStatusList4.length - 1"
											:class="{'activeLine' : ix < 3,'stopLine': ix == 2,'stopLine3': ix == 3}"></text>
									</block>
								</view>
								<view class="new-step-bot display-flex">
									<block v-for="(it,ix) in endStatusList4" :key="ix">
										<text
											:class="{'pass' : ix < 3,'stop': ix == 3 || ix == 4}">
											<block >{{it}}</block>
										</text>
									</block>
								</view>
							</view>

							<view class="new-step-box" v-else-if=" item.status !=5">
								<view class="new-step-top display-flex">
									<block v-for="(it,ix) in statusList" :key="ix">
										<view class="circle"
											:class="{'pass' : item.status > ix -1,'stop': (item.res_status && item.status == ix) || (item.ref_status && item.status == ix  && item.is_tk == 0)}">
											<text></text>
										</view>
										<text class="line" v-if="ix < statusList.length - 1"
											:class="{'activeLine' : item.status > ix,'stopLine': (item.res_status && item.status == ix + 1) || (item.ref_status && item.status == ix + 1 && item.is_tk == 0)}"></text>
									</block>
								</view>
								<view class="new-step-bot display-flex">
									<block v-for="(it,ix) in statusList" :key="ix">
										<text
											:class="{'pass' : item.status > ix - 1,'stop': (item.res_status && item.status == ix) || (item.ref_status && item.status == ix  && item.is_tk == 0)}">
											<block v-if="item.res_status && item.status == ix">申诉中</block>
											<block v-else-if="item.ref_status && item.status == ix && item.is_tk == 0">
												退款中</block>
											<block v-else>{{it}}</block>
										</text>
									</block>
								</view>
							</view>

							<view class="new-step-box" v-else>
								<view class="new-step-top display-flex">
									<view class="circle"
										:class="{'pass' : item.status > -1,'stop': stopStatus == -1}">
										<text></text>
									</view>
									<text class="line" style="width: 260rpx;"
										:class="{'activeLine' : item.status > -1,'stopLine': stopStatus == 0}"></text>
									<view class="circle"
										:class="{'pass' : item.status > 0,'stop': stopStatus == 0}">
										<text></text>
									</view>
									<text class="line stopLine2" style="width: 260rpx;"
										:class="{'activeLine' : item.status > 0}"></text>
									<view class="circle">
										<text></text>
									</view>
								</view>
								<view class="new-step-bot display-flex">
									<text :class="{'pass' : item.status > -1,'stop': stopStatus == -1}">已下单</text>
									<text :class="{'pass' : item.status > 0,'stop': stopStatus == 0}">待接单</text>
									<text>已取消</text>
								</view>
							</view>
						</view>
						<view class="toding"></view>
					</view>
				</swiper-item>

			</swiper>

			<view
				v-if="toUserId !== 'administrator'  && toUserId !== 'hudongmsg' && toUserId !== 'pinglunmsg' && !orderList.length && conversationActive.user && conversationActive.user.is_writer">
				<view class="toobox">
					<view class="toonei">

						<image :src="(conversationActive.user && conversationActive.user.pic) | formatImgUrl"
							class="headpic" mode=""></image>
						<view class="tocen">
							<view class="totop">
								<view class="name">
									{{conversationActive.user.username}}
								</view>
								<image
									:src="$options.filters.formatImgUrl(conversationActive.user.writer_level.is_active?conversationActive.user.writer_level.level.image:conversationActive.user.writer_level.level.hide_img)"
									@click="$go('/pages/user/grade?uid='+conversationActive.user.membe_id)"
									class="jipic" mode=""
									v-if="conversationActive.user && conversationActive.user.is_writer">
								</image>
								<image
									:src="$options.filters.formatImgUrl(conversationActive.user.user_level.active_day>0?conversationActive.user.user_level.level.image:conversationActive.user.user_level.level.hide_img)"
									class="biepic" mode=""
									v-if="conversationActive.user.is_vip&&conversationActive.user.user_level.is_active">
								</image>

							</view>
							<view class="yuan ylv"
								v-if="conversationActive.user && conversationActive.user.writer_user_config && conversationActive.user.writer_user_config.word_price">
								{{conversationActive.user &&conversationActive.user.writer_user_config.word_price}}
								<text>币/{{conversationActive.user.writer_user_config.word_count}}</text>
							</view>
							<view class="yuan ylv" v-else>
								未开启接单
							</view>
						</view>
						<view class="toyou">
							<view class="flexend"
								@click="$go('/pages/tim/userinfo?id='+conversationActive.user.membe_id)">
								<image :src="'/images/she.png' | formatImgUrl" class="pic" mode=""></image>
							</view>


							<view
								v-if="conversationActive.user && conversationActive.user.writer_user_config && conversationActive.user.writer_user_config.word_price!=null"
								class="yue" @click="$go('/pages/my/place?id='+goodList[0].id)">
								约稿
							</view>
						</view>
					</view>
				</view>
			</view>

			<view
				v-if="toUserId !== 'administrator'  && toUserId !== 'hudongmsg' && toUserId !== 'pinglunmsg' && !orderList.length && !(conversationActive.user && conversationActive.user.is_writer)">
				<view class="toobox">
					<view class="toonei">
						<image @click="$go( '/pages/my/my?id=' + conversationActive.user.membe_id)"
							:src="(conversationActive.user && conversationActive.user.pic) | formatImgUrl"
							class="headpic" mode=""></image>

						<view class="tocen">
							<view class="totop">
								<view class="name">
									{{conversationActive.user.username}}
								</view>
								<image
									:src="$options.filters.formatImgUrl(conversationActive.user.writer_level.is_active?conversationActive.user.writer_level.level.image:conversationActive.user.writer_level.level.hide_img)"
									@click="$go('/pages/user/grade?uid='+conversationActive.user.membe_id)"
									class="jipic" mode=""
									v-if="conversationActive.user && conversationActive.user.is_writer">
								</image>
								<image
									:src="$options.filters.formatImgUrl(conversationActive.user.user_level.active_day>0?conversationActive.user.user_level.level.image:conversationActive.user.user_level.level.hide_img)"
									class="biepic" mode=""
									v-if="conversationActive.user.is_vip&&conversationActive.user.user_level.is_active">
								</image>

							</view>
							<view class="yuan ylv"
								v-if="conversationActive.user && conversationActive.user.writer_user_config && conversationActive.user.writer_user_config.word_price">
								{{conversationActive.user && conversationActive.user.writer_user_config.word_price}}
								<text>币/{{conversationActive.user.writer_user_config.word_count}}</text>
							</view>
							<view class="yuan ylvs" v-else>
								<!-- 未开启接单 -->
								{{!conversationActive.user.signature_des?"这个用户很神秘、什么都没留下":conversationActive.user.signature_des}}
							</view>
						</view>
						<view class="toyou">
							<view class="flexend"
								@click="$go('/pages/tim/userinfo?id='+conversationActive.user.membe_id)">
								<image :src="'/images/she.png' | formatImgUrl" class="pic" mode=""></image>
							</view>

							<view
								v-if="conversationActive.user.is_writer==0 && !(conversationActive.user && conversationActive.user.is_writer)"
								class="yue" @click="$go( '/pages/my/my?id=' + conversationActive.user.membe_id)">
								查看
							</view>

							<view
								v-if="conversationActive.user && conversationActive.user.writer_user_config &&  conversationActive.user.writer_user_config.word_price!=null"
								class="yue" @click="$go('/pages/my/place?id='+goodList[0].id)">
								约稿
							</view>
						</view>
					</view>
				</view>
			</view>


			<!-- 	<scroll-view
			
				:class="{oneheight : toUserId !== 'administrator'  && toUserId !== 'hudongmsg' && toUserId !== 'pinglunmsg'  && !orderList.length ,twoheight : orderList.length}"
				
				class="msg-list" scroll-y="true" :scroll-with-animation="scrollAnimation" :scroll-top="scrollTop"
				:scroll-into-view="scrollToView" @scrolltoupper="loadHistory" upper-threshold="30"
				:style="toUserId === 'administrator'||toUserId === 'hudongmsg'||toUserId === 'pinglunmsg'?'padding-bottom:10px !important;bottom: 0 !important;':orderList.length?'margin-top:-40px':
				'height:78vh'"> -->
			<scroll-view
				:class="{oneheight : toUserId !== 'administrator'  && toUserId !== 'hudongmsg' && toUserId !== 'pinglunmsg'  && !orderList.length ,twoheight : orderList.length}"
				:refresher-triggered="triggered" class="msg-list" scroll-y="true"
				:scroll-with-animation="scrollAnimation" :scroll-top="scrollTop" :scroll-into-view="scrollToView"
				refresher-enabled="true" @refresherrefresh="loadHistory1()" @refresherpulling="onPulling" :style="toUserId === 'administrator'||toUserId === 'hudongmsg'||toUserId === 'pinglunmsg'?'padding-bottom:10px !important;bottom: 0 !important;':orderList.length?'margin-top:0px':
					'height:72vh'">
				<!-- 加载历史数据waitingUI -->
				<!-- <view class="loading">
					<view class="spinner">
						<view class="rect1"></view>
						<view class="rect2"></view>
						<view class="rect3"></view>
						<view class="rect4"></view>
						<view class="rect5"></view>
					</view>
				</view> -->

				<view class="row" v-for="(item,index) in msgList" :key="index" :id="item.ID">
					<!-- 用户消息 -->
					<!-- v-if="toUserInfo.userID !== 'administrator'&&toUserInfo.userID !== 'hudongmsg'&&toUserInfo.userID !== 'pinglunmsg'" -->
					<block
						v-if="item.payload.text && item.payload.text.indexOf('type') == -1 || item.type==TIM.TYPES.MSG_IMAGE || item.type==TIM.TYPES.MSG_VIDEO || item.payload.audioUrl">
						<view :id="'msg-'+item.ID">
							<!-- 自己发出的消息 -->
							<view class="my" v-if="item.flow=='out'">
								<!-- 左-消息 -->

								<view class="left">
									<!-- 文字消息 -->
									<view v-if="item.type==TIM.TYPES.MSG_TEXT" class="bubble"
										style="background: #45CEB9;color: #fff;">
										<rich-text :nodes="nodesFliter(item.payload.text)"></rich-text>
										<image
											style="position: absolute;top:27rpx;right:4rpx;width: 23rpx;height: 29rpx"
											:src="'/images/msg_tri2.png' | formatImgUrl" mode="aspectFit"></image>
									</view>
									<!-- 图片消息 -->
									<scroll-view
										@click="showPics(item.payload.imageInfoArray[0].url,[item.payload.imageInfoArray[0].url])"
										v-if="item.type==TIM.TYPES.MSG_IMAGE" class="bubble"
										style="padding: 10rpx;width: 280rpx;background: #F2F5F2 !important;margin-right: 0;">
										<!-- <u--image :showLoading="true" :src="item.payload.imageInfoArray[0].url"
											width="260rpx" mode="widthFix" :lazy-load="true"></u--image> -->

										<image :src="item.payload.imageInfoArray[0].url"
											style="width: 280rpx;border-radius: 10rpx;" mode="widthFix"
											lazy-load="true"></image>
										<!-- <image
											style="position: absolute;top:22rpx;right:4rpx;width: 23rpx;height: 29rpx"
											:src="'/images/msg_tri2.png' | formatImgUrl" mode=""></image> -->
									</scroll-view>

									<!-- 视频消息 -->
									<view v-if="item.type==TIM.TYPES.MSG_VIDEO">
										<video :src="item.payload.videoUrl" controls
											:style="'width:'+item.payload.thumbWidth/3+'rpx;height:'+item.payload.thumbHeight/3+'rpx'"></video>
									</view>
									<view v-if="item.type=='TIMSoundElem' || item.payload.audioUrl">
										<image style="width: 80rpx;height: 80rpx"
											:src="'/images/chaticon1.png' | formatImgUrl" mode=""
											@tap="playVoice(item.payload.audioUrl)"></image>
									</view>
								</view>
								<!-- 右-头像 -->
								<view class="right">
									<image :src="(userInfo && userInfo.pic) | formatImgUrl"></image>
								</view>
							</view>
							<!-- 别人发出的消息 -->
							<view class="other" v-else>
								<!-- 左-头像 -->
								<view class="left" @click="goTomy">
									<!-- 	<image v-if="conversationActive.user"
										:src="conversationActive.user.pic?$options.filters.formatImgUrl(conversationActive.user.pic):('../../static/images/qyh.png'  | formatImgUrl)">
									</image>
									<image v-if="conversationActive.userProfile.userID == 'administrator'"
										:src="toUserInfo.avatar">
									</image> -->
									<image :src="toUserInfo && toUserInfo.avatar">
									</image>

								</view>
								<!-- 右-用户名称-时间-消息 -->
								<view class="right">
									<view class="username" v-if="
									(conversationActive.userProfile && conversationActive.userProfile.userID == 'administrator') || 
									(conversationActive.userProfile && conversationActive.userProfile.userID == 'hudongmsg') ||
									(conversationActive.userProfile && conversationActive.userProfile.userID == 'pinglunmsg')
									">
										<!-- 		<view class="name" v-if="conversationActive.user">
											{{conversationActive.user.username?conversationActive.user.username:(toUserInfo.userID | makeNickName)}}
										</view> -->

										<!-- <view class="time">{{timeFliter(item.time)}}</view> -->

										<!-- {{toUserInfo.nick}} -->
									</view>


									<view class="time">{{timeFliter(item.time)}}</view>
									<!-- 文字消息 -->
									<view v-if="item.type==TIM.TYPES.MSG_TEXT" class="bubble"
										:style="(conversationActive.userProfile && conversationActive.userProfile.userID == 'administrator') || 
									(conversationActive.userProfile && conversationActive.userProfile.userID == 'hudongmsg') ||
									(conversationActive.userProfile && conversationActive.userProfile.userID == 'pinglunmsg')?'margin-top:-40rpx':''">
										<rich-text :nodes="nodesFliter(item.payload.text)"></rich-text>
										<image style="position: absolute;top:20rpx;left:4rpx;width: 23rpx;height: 29rpx"
											:src="'/images/msg_tri.png' | formatImgUrl" mode="aspectFit"></image>
									</view>

									<!-- 图片消息 -->
									<view
										@click="showPics(item.payload.imageInfoArray[0].url,[item.payload.imageInfoArray[0].url])"
										v-if="item.type==TIM.TYPES.MSG_IMAGE" class="bubble" style="width: 280rpx;">
										<!-- <u--image :showLoading="true" :src="item.payload.imageInfoArray[0].imageUrl" mode="widthFix" width="280rpx"></u--image> -->
										<!-- <image :src="item.payload.imageInfoArray[0].imageUrl" mode="widthFix" style="width:260rpx" lazy-load="true"></image> -->
										<image :src="item.payload.imageInfoArray[0].url"
											style="width: 280rpx;border-radius: 10rpx;" mode="widthFix"
											lazy-load="true"></image>
										<!-- <image style="position: absolute;top:10rpx;left:4rpx;width: 23rpx;height: 29rpx"
											:src="'/images/msg_tri.png' | formatImgUrl" mode=""></image> -->
									</view>

									<!-- 视频消息 -->
									<view v-if="item.type==TIM.TYPES.MSG_VIDEO">
										<video :src="item.payload.videoUrl" controls
											:style="'width:'+item.payload.thumbWidth/3+'rpx;height:'+item.payload.thumbHeight/3+'rpx'"></video>
									</view>

									<!-- 语言消息 -->
									<view v-if="item.type=='TIMSoundElem' || item.payload.audioUrl">
										<image style="width: 80rpx;height: 80rpx"
											:src="'/images/chaticon1.png' | formatImgUrl" mode=""
											@tap="playVoice(item.payload.audioUrl)"></image>
									</view>
								</view>
							</view>

						</view>

					</block>

					<!-- 通知消息 -->
					<block v-else>
						<view class="sys_msg_box">
							<view class="sys_msg_time">{{timeFliter(item.time)}}</view>
							<view class="sys_msg_item">
								<view class="sys_tit display-flex just-between">
									<text class="">{{item.title || item.payload.text}}</text>
									<image :src="'/images/bao.png'  | formatImgUrl" class="jubox" mode="aspectFit"
										@tap="showOperate=true"></image>
								</view>
								<view class="sys_line display-flex">
									<text class="sys_label">{{item.left_1}}：</text>
									<text class="sys_cont">{{item.left_1_val}}</text>
								</view>
								<view class="sys_line display-flex">
									<text class="sys_label">{{item.left_2}}：</text>
									<text class="sys_cont">{{item.left_2_val}}</text>
								</view>

								<view class="sys_detail display-flex just-between" @tap="gotoDetail(item)">
									<text>查看详情</text>
									<image :src="'/images/msg_r.png' | formatImgUrl" class="rar" mode=""></image>
								</view>
							</view>
						</view>
					</block>

				</view>
			</scroll-view>
		</view>

		<!-- 抽屉栏 -->
		<view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- 表情 -->
			<swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150">
				<swiper-item v-for="(page,pid) in emojiList" :key="pid">
					<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
						<image mode="widthFix" :src="'/emoji/'+em.url | formatImgUrl"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 更多功能 相册-拍照-红包 -->
			<view class="more-layer" :class="{hidden:hideMore}">
				<view class="list">
					<view class="box" @tap="chooseImage">
						<view class="icon tupian2"></view>
					</view>
					<view class="box" @tap="camera">
						<view class="icon paizhao"></view>
					</view>
					<!-- <view class="box" @tap="handRedEnvelopes">
						<view class="icon hongbao"></view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 底部输入栏 -->
		<view class="input-box new-input-box" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}"
			:class="popupLayerClass" @touchmove.stop.prevent="discard"
			v-if="toUserInfo && toUserInfo.userID !== 'administrator'&&toUserInfo.userID !== 'hudongmsg'&&toUserInfo.userID !== 'pinglunmsg'">
			<!-- H5下不能录音，输入栏布局改动一下 -->

			<!-- #ifdef H5 -->
			<!-- <view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view> -->
			<!-- #endif -->

			<view class="display-flex just-between">
				<view class="textbox">
					<view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']"
						@touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd"
						@touchcancel="voiceCancel">{{voiceTis}}</view>
					<!-- <view class="text-mode" :class="isVoice?'hidden':''">
						<view class="box">
							<textarea auto-height="true" @input="handleInputChange" v-model="textMsg" maxlength="-1"
								@focus="textareaFocus" />
						</view>
					</view> -->
					
					<scroll-view scroll-y="true" class="text-mode" :class="isVoice?'hidden':''">
						<view class="box">
							<textarea auto-height="true" @input="handleInputChange" v-model="textMsg" maxlength="-1"
								@focus="textareaFocus" />
						</view>
					</scroll-view>
				</view>
				<view class="send" @tap="sendText" v-if="!isVoice">
					<view class="btn">发送</view>
				</view>
			</view>

			<view class="display-flex" style="justify-content: space-around;" v-if="!isVoice">
				<view class="menus" :class="mIndex == 0 ? 'menusA' : ''">
					<image :src="'/images/chaticon1.png'  | formatImgUrl" mode="" class="menu-item" @touchstart="voiceBegin"
						@touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel"></image>
				</view>
				<view class="menus"  :class="mIndex == 1 ? 'menusA' : ''">
					<image :src="'/images/chaticon2.png'  | formatImgUrl" mode="" class="menu-item" @tap.stop="camera">
					</image>
				</view>
				<view class="menus"  :class="mIndex == 2 ? 'menusA' : ''">
					<image :src="'/images/chaticon3.png'  | formatImgUrl" mode="" class="menu-item">
					</image>
				</view>
				<view class="menus" :class="mIndex == 3 ? 'menusA' : ''">
					<image :src="'/images/chaticon4.png'  | formatImgUrl" mode="" class="menu-item" @tap.stop="chooseImage">
					</image>
				</view>
				<view class="menus" :class="mIndex == 4 ? 'menusA' : ''">
					<image :src="'/images/chaticon5.png'  | formatImgUrl" mode="" class="menu-item" @tap.stop="chooseEmoji">
					</image>
				</view>
			</view>
		</view>
		<!-- 录音UI效果 -->
		<view class="record" :class="recording?'':'hidden'">
			<view class="ing" :class="willStop?'hidden':''">
				<view class="icon luyin2"></view>
			</view>
			<view class="cancel" :class="willStop?'':'hidden'">
				<view class="icon chehui"></view>
			</view>
			<view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
		</view>
		<!-- 红包弹窗 -->
		<view class="windows" :class="windowsState">
			<!-- 遮罩层 -->
			<view class="mask" @touchmove.stop.prevent="discard" @tap="closeRedEnvelope"></view>
			<view class="layer" @touchmove.stop.prevent="discard">
				<view class="open-redenvelope">
					<view class="top">
						<view class="close-btn">
							<view class="icon close" @tap="closeRedEnvelope"></view>
						</view>
						<!-- <image src="/static/img/im/face/face_1.jpg"></image> -->
					</view>
					<view class="from">来自{{redenvelopeData.from}}</view>
					<view class="blessing">{{redenvelopeData.blessing}}</view>
					<view class="money">{{redenvelopeData.money}}</view>
					<view class="showDetails" @tap="toDetails(redenvelopeData.rid)">
						查看领取详情 <view class="icon to"></view>
					</view>
				</view>
			</view>

		</view>

		<!-- 弹窗 -->
		<u-popup :show="showOperate">
			<view class="mask">
				<view class="matop" v-if="uid === $db.get('userInfo').membe_id">
					<view class="matxt">
						<text>删除</text>
					</view>
					<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
				</view>

				<view class="qubox" @click="showOperate = false">
					取消
				</view>
			</view>
		</u-popup>

		<!-- 录音效果 -->
		<!-- <view v-if="recording">
			<view class="record-popup"
				:style="{ '--popup-height': popupHeight, '--popup-width': upx2px(popupMaxWidth), '--popup-bottom': upx2px(popupFixBottom), '--popup-bg-color': popupBgColor }">
				<view class="inner-content">
					<view class="voice-line-wrap"
						:style="{ '--line-height': upx2px(lineHeight), '--line-start-color': lineStartColor, '--line-end-color': lineEndColor }">
						<view class="voice-line one"></view>
						<view class="voice-line two"></view>
						<view class="voice-line three"></view>
						<view class="voice-line four"></view>
						<view class="voice-line five"></view>
						<view class="voice-line six"></view>
						<view class="voice-line seven"></view>
						<view class="voice-line six"></view>
						<view class="voice-line five"></view>
						<view class="voice-line four"></view>
						<view class="voice-line three"></view>
						<view class="voice-line two"></view>
						<view class="voice-line one"></view>
					</view>
					<view class="tips">{{ recordTis }}</view>
				</view>
			</view>
		</view> -->
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex";

	export default {
		props: {
			popupMaxWidth: {
				type: Number,
				default: 600 // 单位为rpx
			},
			popupMaxHeight: {
				type: Number,
				default: 300 // 单位为rpx
			},
			popupFixBottom: {
				type: Number,
				default: 200 // 单位为rpx
			},
			popupBgColor: {
				type: String,
				default: 'whitesmoke'
			},
			lineHeight: {
				type: Number,
				default: 50 // 单位为rpx
			},
			lineStartColor: {
				type: String,
				default: '#45C4B0' // 颜色名称或16进制色值
			},
			lineEndColor: {
				type: String,
				default: '#45C4B0' // 颜色名称或16进制色值
			}
		},
		data() {
			return {
				mIndex: -1,
				statusList: ['已支付', '待接单', '进行中', '定稿中', '已完成'],
				endStatusList: ['已支付','待接单','进行中','退款中','已退款'],
				endStatusList2: ['已支付','待接单','退款中','已退款'],
				endStatusList3: ['已支付','待接单','申诉中','已取消'],
				endStatusList4: ['已支付','待接单','进行中','申诉中','已取消'],
				recording: true,
				triggered: false,
				paddingBottomHeight: 20, //苹果X以上手机底部适配高度
				// 状态展示
				showbox: 1,
				// 写手、用户
				userType: 0,
				// 写手端是否有订单
				isValue: true,
				//TIM变量
				conversationActive: {

				},
				toUserId: '',
				toUserInfo: null,
				userInfo: this.$db.get('userInfo'),
				nextReqMessageID: '',
				count: 15,
				isCompleted: '',
				msgList: [],
				TIM: null,


				//文字消息
				textMsg: '',
				//消息列表
				isHistoryLoading: false,
				scrollAnimation: false,
				scrollTop: 0,
				scrollToView: '',

				msgImgList: [],
				myuid: 0,
				uid: '',
				//录音相关参数
				// #ifndef H5
				//H5不能录音
				RECORDER: uni.getRecorderManager(),
				// #endif
				isVoice: false,
				voiceTis: '按住 说话',
				recordTis: "手指上滑 取消发送",
				recording: false,
				willStop: false,
				initPoint: {
					identifier: 0,
					Y: 0
				},
				recordTimer: null,
				recordLength: 0,

				//播放语音相关参数
				AUDIO: uni.createInnerAudioContext(),
				playMsgid: null,
				VoiceTimer: null,
				// 抽屉参数
				popupLayerClass: '',
				// more参数
				hideMore: true,
				//表情定义
				hideEmoji: true,
				emojiList: this.$commen.emojiList,
				//表情图片图床名称 ，由于我上传的第三方图床名称会有改变，所以有此数据来做对应，您实际应用中应该不需要
				onlineEmoji: {
					"100.gif": "AbNQgA.gif",
					"101.gif": "AbN3ut.gif",
					"102.gif": "AbNM3d.gif",
					"103.gif": "AbN8DP.gif",
					"104.gif": "AbNljI.gif",
					"105.gif": "AbNtUS.gif",
					"106.gif": "AbNGHf.gif",
					"107.gif": "AbNYE8.gif",
					"108.gif": "AbNaCQ.gif",
					"109.gif": "AbNN4g.gif",
					"110.gif": "AbN0vn.gif",
					"111.gif": "AbNd3j.gif",
					"112.gif": "AbNsbV.gif",
					"113.gif": "AbNwgs.gif",
					"114.gif": "AbNrD0.gif",
					"115.gif": "AbNDuq.gif",
					"116.gif": "AbNg5F.gif",
					"117.gif": "AbN6ET.gif",
					"118.gif": "AbNcUU.gif",
					"119.gif": "AbNRC4.gif",
					"120.gif": "AbNhvR.gif",
					"121.gif": "AbNf29.gif",
					"122.gif": "AbNW8J.gif",
					"123.gif": "AbNob6.gif",
					"124.gif": "AbN5K1.gif",
					"125.gif": "AbNHUO.gif",
					"126.gif": "AbNIDx.gif",
					"127.gif": "AbN7VK.gif",
					"128.gif": "AbNb5D.gif",
					"129.gif": "AbNX2d.gif",
					"130.gif": "AbNLPe.gif",
					"131.gif": "AbNjxA.gif",
					"132.gif": "AbNO8H.gif",
					"133.gif": "AbNxKI.gif",
					"134.gif": "AbNzrt.gif",
					"135.gif": "AbU9Vf.gif",
					"136.gif": "AbUSqP.gif",
					"137.gif": "AbUCa8.gif",
					"138.gif": "AbUkGQ.gif",
					"139.gif": "AbUFPg.gif",
					"140.gif": "AbUPIS.gif",
					"141.gif": "AbUZMn.gif",
					"142.gif": "AbUExs.gif",
					"143.gif": "AbUA2j.gif",
					"144.gif": "AbUMIU.gif",
					"145.gif": "AbUerq.gif",
					"146.gif": "AbUKaT.gif",
					"147.gif": "AbUmq0.gif",
					"148.gif": "AbUuZV.gif",
					"149.gif": "AbUliF.gif",
					"150.gif": "AbU1G4.gif",
					"151.gif": "AbU8z9.gif",
					"152.gif": "AbU3RJ.gif",
					"153.gif": "AbUYs1.gif",
					"154.gif": "AbUJMR.gif",
					"155.gif": "AbUadK.gif",
					"156.gif": "AbUtqx.gif",
					"157.gif": "AbUUZ6.gif",
					"158.gif": "AbUBJe.gif",
					"159.gif": "AbUdIO.gif",
					"160.gif": "AbU0iD.gif",
					"161.gif": "AbUrzd.gif",
					"162.gif": "AbUDRH.gif",
					"163.gif": "AbUyQA.gif",
					"164.gif": "AbUWo8.gif",
					"165.gif": "AbU6sI.gif",
					"166.gif": "AbU2eP.gif",
					"167.gif": "AbUcLt.gif",
					"168.gif": "AbU4Jg.gif",
					"169.gif": "AbURdf.gif",
					"170.gif": "AbUhFS.gif",
					"171.gif": "AbU5WQ.gif",
					"172.gif": "AbULwV.gif",
					"173.gif": "AbUIzj.gif",
					"174.gif": "AbUTQs.gif",
					"175.gif": "AbU7yn.gif",
					"176.gif": "AbUqe0.gif",
					"177.gif": "AbUHLq.gif",
					"178.gif": "AbUOoT.gif",
					"179.gif": "AbUvYF.gif",
					"180.gif": "AbUjFU.gif",
					"181.gif": "AbaSSJ.gif",
					"182.gif": "AbUxW4.gif",
					"183.gif": "AbaCO1.gif",
					"184.gif": "Abapl9.gif",
					"185.gif": "Aba9yR.gif",
					"186.gif": "AbaFw6.gif",
					"187.gif": "Abaiex.gif",
					"188.gif": "AbakTK.gif",
					"189.gif": "AbaZfe.png",
					"190.gif": "AbaEFO.gif",
					"191.gif": "AbaVYD.gif",
					"192.gif": "AbamSH.gif",
					"193.gif": "AbaKOI.gif",
					"194.gif": "Abanld.gif",
					"195.gif": "Abau6A.gif",
					"196.gif": "AbaQmt.gif",
					"197.gif": "Abal0P.gif",
					"198.gif": "AbatpQ.gif",
					"199.gif": "Aba1Tf.gif",
					"200.png": "Aba8k8.png",
					"201.png": "AbaGtS.png",
					"202.png": "AbaJfg.png",
					"203.png": "AbaNlj.png",
					"204.png": "Abawmq.png",
					"205.png": "AbaU6s.png",
					"206.png": "AbaaXn.png",
					"207.png": "Aba000.png",
					"208.png": "AbarkT.png",
					"209.png": "AbastU.png",
					"210.png": "AbaB7V.png",
					"211.png": "Abafn1.png",
					"212.png": "Abacp4.png",
					"213.png": "AbayhF.png",
					"214.png": "Abag1J.png",
					"215.png": "Aba2c9.png",
					"216.png": "AbaRXR.png",
					"217.png": "Aba476.png",
					"218.png": "Abah0x.png",
					"219.png": "Abdg58.png"
				},
				//红包相关参数
				windowsState: '',
				redenvelopeData: {
					rid: null, //红包ID
					from: null,
					face: null,
					blessing: null,
					money: null
				},
				friendList: [],
				showpica: true,
				showElement: false,
				orderInfo: {},
				topUserInfo: {},
				goodList: {},
				orderList: [],
				page: 1,
				is_end: 0,
				showOperate: false,
				userID: '',
				
				is_dong: ''
			};
		},
		computed: {
			...mapState({
				currentMessageList: state => state.currentMessageList,
				currentFriendList: state => state.friendList,
			})
		},
		watch: {
			currentMessageList(newVal, oldVal) {
				console.log("newVal", newVal[0].ID);

				// var msgImgList = []

				console.log(8888888, newVal, 5555555555)
				if (this.msgList.length > 0) {
					console.log(111)

					this.msgList.push(newVal[newVal.length - 1]);

					console.log(this.nextReqMessageID, 979797)
				} else {

					console.log(222)
					this.msgList = res.newVal;
				}

				this.nextReqMessageID = 'msg-' + newVal[newVal.length - 1].ID // 用于续拉，分页续拉时需传入该字段。

				this.$nextTick(() => {

					this.scrollToView = this.nextReqMessageID

				});
				// this.msgList = newVal



				return;
				console.log('msgImgList', msgImgList)
				this.msgImgList = msgImgList

				this.screenMsg(newVal, oldVal)

			},
			currentFriendList(newVal, oldVal) {
				this.friendList = newVal
			},
			'toUserInfo': function(newData, oldData) {
				var nick = newData.nick ? newData.nick : (this.$options.filters.makeNickName(newData.userID))
				uni.setNavigationBarTitle({
					title: nick
				})
			},
			'textMsg': function(val) {
				this.showElement = val ? true : false
			}
		},
		created: {

		},
		onLoad(option) {

			// // 传入用户类型
			// if (option.userType && option.uid) {
			// 	if (option.showbox) {
			// 		this.showbox = option.showbox
			// 		if(option.showbox == 1){
			// 			this.getGoodList(option.uid)
			// 		}
			// 	}

			// 	if (option.oid) {
			// 		this.isValue = option.oid ? true : false
			// 		this.getOrderInfo(option.oid)
			// 	}

			// 	this.getUserInfo(option.uid)

			// 	this.userType = option.userType
			// }

			this.toUserId = this.$store.state.toUserId ? this.$store.state.toUserId : (this.$store.state
				.conversationActive && this.$store.state.conversationActive
				.userProfile && this.$store.state.conversationActive
				.userProfile.userID)



			this.getUserProfile()
			this.conversationActive = this.$store.state.conversationActive

			if (this.toUserId !== 'administrator' && this.toUserId !== 'hudongmsg' && this.toUserId !== 'pinglunmsg') {
				this.getUserInfo(this.toUserId)
			}

			this.TIM = this.$TIM
			//获取聊天对象的用户信息
			// this.toUserInfo = this.$store.state.conversationActive.userProfile


			//语音自然播放结束
			this.AUDIO.onEnded((res) => {
				this.playMsgid = null;
			});
			// #ifndef H5
			//录音开始事件
			this.RECORDER.onStart((e) => {
				this.recordBegin(e);
			})
			//录音结束事件
			this.RECORDER.onStop((e) => {
				console.log(e, 'onStop');
				this.recordEnd(e);
			})
			// #endif
			// 查询是否有订单
			this.getOrderList()
			this.getGoodList(this.toUserId)
			this.loadHistory();
			this.getAccountState()
		},
		onShow() {
			let that = this


			if (this.toUserId !== 'administrator' && this.toUserId !== 'hudongmsg' && this.toUserId !== 'pinglunmsg') {
				this.getUserInfo(this.toUserId)
			}

			setTimeout(function() {
				that.scrollTop = 999999999999999;
			}, 500);
		},
		onHide() {

		},
		onUnload() {

			console.log("关闭了")

			//退出页面 将所有的会话内的消息设置为已读
			let promise = this.tim.setMessageRead({
				conversationID: this.conversationActive.conversationID
			});
			promise.then(function(imResponse) {
				console.log('全部已读')
				// 已读上报成功
			}).catch(function(imError) {
				// 已读上报失败
				console.warn('setMessageRead error:', imError);
			});
		},
		methods: {
			// 通知 查看详情
			gotoDetail(item) {
				let url;
				// 0回复发布的内容 2内容点赞 3评价的点赞
				if (item.type == 0 || item.type == 2 || item.type == 3) {
					url = '/pages/find/content?id=' + item.id
					// 1回复评价
				} else if (item.type == 1) {
					url = '/pages/find/review?id=' + item.id + '&pid=' + item.pid
					// 4开通VIP服务开通成功通知
				} else if (item.type == 4) {
					url = '/pages/user/vip'
					// 5您的需求已匹配成功 6您已收到新的订单
				} else if (item.type == 5 || item.type == 6) {
					url = '/task/list/my_orderlist'
					// 9您的入团申请已通过 10您的入团申请未通过
				} else if (item.type == 9 || item.type == 10) {
					url = '/pages/user/success?id=' + item.id
					// 14您的开票申请已通过
				} else if (item.type == 14) {
					url = '/showcase/showcase/invoiceDetail?id=' + item.id
					// 15您的橱窗申请已通过 16您的橱窗申请未通过
				} else if (item.type == 15 || item.type == 16) {
					url = '/showcase/showcase/showcase'
					// 17您的橱窗被被投诉下架，请从新提交审核
				} else if (item.type == 17) {
					url = '/showcase/showcase/edit'
				}


				this.$go(url)
			},
			upx2px(upx) {
				return uni.upx2px(upx) + 'px';
			},
			loadHistory1() {
				this.loadHistory();
			},
			onPulling() {
				var that = this;

				if (!this.triggered) {

					//下拉加载，先让其变true再变false才能关闭
					this.triggered = true;
					//关闭加载状态 (转动的圈)，需要一点延时才能关闭
					setTimeout(() => {
						that.triggered = false;
					}, 1000)
				}

			},
			goTomy() {
				if (this.conversationActive.userProfile.userID != 'administrator' &&
					this.conversationActive.userProfile.userID != 'hudongmsg' &&
					this.conversationActive.userProfile.userID != 'pinglunmsg'
				) {
					uni.navigateTo({
						url: '/pages/tim/userinfo?id=' + this.conversationActive.user.membe_id
					})
				}
			},
			getOrderList() {
				this.$api.default.request('order/getTimOrderList', {
					uid: this.toUserId,
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.orderList = res.data
					}
				})
			},

			getUserInfo(id) {
				//请求？
				this.conversationActive.user = [];
				this.$api.default.request('user/userInfo_friend_info', {
					uid: id
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.conversationActive.user = res.user
					}
				})

			},

			getGoodList(id) {
				this.$api.default.request('user/userPageList', {
					uid: id,
					page: 1,
					type: 1
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.goodList = res.data.data
					}
				})
			},

			// 获取订单信息
			getOrderInfo(id) {
				this.$api.default.request('order/orderInfo', {
					id: id
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.orderInfo = res.data
					}
				})
			},

			handleInputChange() {
				if (this.textMsg) {
					this.showElement = true // 有值时展示元素
					this.showpica = false
				} else {
					this.showElement = false // 没有值时隐藏元素
					this.showpica = true
				}
			},
			// 获取用户信息
			getUserProfile() {
				var that = this
				let promise = this.tim.getUserProfile({
					userIDList: [this.toUserId] // 请注意：即使只拉取一个用户的资料，也需要用数组类型，例如：userIDList: ['user1']
				});
				promise.then(function(imResponse) {
					console.log('用户资料', imResponse.data[0]); // 存储用户资料的数组 - [Profile]
					that.toUserInfo = imResponse.data[0]
				}).catch(function(imError) {
					console.warn('getUserProfile error:', imError); // 获取其他用户资料失败的相关信息
				});
			},
			//聊天的节点加上外层的div
			nodesFliter(str) {
				let nodeStr = '<div style="align-items: center;word-wrap:break-word;">' + str + '</div>'
				return nodeStr
			},
			//时间过滤
			timeFliter(timer) {
				let timeData = new Date(timer * 1000)
				let str = this.$commen.dateTimeFliter_s(timeData)

				return str
			},
			// 接受消息(定位消息)
			screenMsg(newVal, oldVal) {

				console.log("newVal", newVal)
				console.log("oldVal", oldVal)
				return;

				let that = this;
				if (newVal.length && oldVal.length) {
					if (newVal[0].ID != oldVal[0].ID && newVal.length >= this.count) {
						that.$nextTick(() => {
							that.scrollToView = "msg-" + oldVal[0].ID
						});
					} else {
						that.$nextTick(() => {
							that.scrollToView = "msg-" + newVal[newVal.length - 1].ID

						});
					}
				} else {
					that.$nextTick(() => {
						if (newVal.length) {
							that.scrollToView = "msg-" + newVal[newVal.length - 1].ID

						}
					});
				}

				if (newVal.length) {
					this.nextReqMessageID = newVal[0].ID

				}
			},
			//触发滑动到顶部(加载历史信息记录)
			loadHistory(e) {



				let that = this;
				//get_mychat_dea
				let conversationID = this.conversationActive.conversationID
				console.log(777777, this.msgList)
				if (this.is_end == 1) {
					return;
				}

				//应该拿进来的时间去查 不然数据可能会重复
				this.$api.default.request('user/get_mychat_dea', {
					conversationID: conversationID,
					nextReqMessageID: that.nextReqMessageID,
					count: that.count,
					page: this.page,
					fuid: this.toUserId
				}).then((res) => {

					if (res.code) {
						console.log(res, 888);
						if (res.data.length > 0) {
							console.log(that.msgList.length)
							// this.articleList = this.articleList.concat(res.data.data);
							if (that.msgList.length > 0) {
								// let fast_id = 0;
								for (let i = 0; i < res.data.length; i++) {
									let msgItem = res.data[i]
									if (msgItem.payload.text && msgItem.payload.text.indexOf('type') > -1) {
										let msgParse = JSON.parse(msgItem.payload.text.substr(4))
										msgItem.title = msgParse.title
										msgItem.id = msgParse.aid
										msgItem.pid = msgParse.pid
										msgItem.type = msgParse.type
										msgItem.left_1 = msgParse.left_1
										msgItem.left_1_val = msgParse.left_1_val
										msgItem.left_2 = msgParse.left_2
										msgItem.left_2_val = msgParse.left_2_val
									}


									that.msgList.unshift(msgItem);
									// 
									console.log(res.data[i].ID, 222222)
								}
								that.nextReqMessageID = 'msg-' + res.data[0].ID // 用于续拉，分页续拉时需传入该字段。

								that.scrollAnimation = false;

								that.$nextTick(function() {
									// 	console.log(99999999,that.nextReqMessageID)
									that.scrollToView = that.nextReqMessageID; //跳转上次的第一行信息位置
									that.$nextTick(function() {
										that.scrollAnimation = true; //恢复滚动动画

									});
								});

								// if(res.data[15]){
								// that.nextReqMessageID = 'msg-'+res.data[0].ID // 用于续拉，分页续拉时需传入该字段。
								// }else{
								// 	that.nextReqMessageID = 'msg-'+res.data[0].ID // 用于续拉，分页续拉时需传入该字段。
								// }


							} else {
								let list = res.data
								for (let i = 0; i < list.length; i++) {
									let msgItem = list[i]
									if (msgItem.payload.text && msgItem.payload.text.indexOf('type') > -1) {
										let msgParse = JSON.parse(msgItem.payload.text.substr(4))
										console.log(msgParse);
										msgItem.title = msgParse.title
										msgItem.id = msgParse.aid
										msgItem.pid = msgParse.pid
										msgItem.type = msgParse.type
										msgItem.left_1 = msgParse.left_1
										msgItem.left_1_val = msgParse.left_1_val
										msgItem.left_2 = msgParse.left_2
										msgItem.left_2_val = msgParse.left_2_val
									}
								}



								that.msgList = list;
								that.nextReqMessageID = 'msg-' + res.data[res.data.length - 1]
									.ID // 用于续拉，分页续拉时需传入该字段。
								that.scrollAnimation = false;
								that.$nextTick(function() {
									console.log(99999999, that.nextReqMessageID)

									that.scrollToView = that.nextReqMessageID; //跳转上次的第一行信息位置
									that.$nextTick(function() {
										that.scrollAnimation = true; //恢复滚动动画
									});
								});
							}

							// setTimeout(function(){

							// 	that.isHistoryLoading = false;
							// },200)

							// that.msgList  = res.data
							that.page++;
						} else {

							that.is_end = 1
						}
						// console.log(99999999,res.data.conversationID)



						// that.isCompleted = res.data.isCompleted

						// this.conversationList_length = this.msgList.length
						// obj.user = res.user
						// arr.push(JSON.parse(JSON.stringify(obj)))
					}
				})

				// // 更多消息列表
				// let conversationID = this.conversationActive.conversationID
				// let promise = this.tim.getMessageList({
				// 	conversationID: conversationID,
				// 	nextReqMessageID: that.nextReqMessageID,
				// 	count: that.count
				// });
				// promise.then((res) => {
				// 	that.$store.commit('unshiftCurrentMessageList', res.data.messageList)
				// 	that.nextReqMessageID = res.data.nextReqMessageID // 用于续拉，分页续拉时需传入该字段。
				// 	that.isCompleted = res.data.isCompleted
				// });

				// // //这段代码很重要，不然每次加载历史数据都会跳到顶部
				setTimeout(function() {

				}, 300)
			},
			// 加载初始页面消息
			getMsgList() {
				return;
				let that = this;
				//get_mychat_dea
				let conversationID = this.conversationActive.conversationID

				this.$api.default.request('user/get_mychat_dea', {
					conversationID: conversationID,
					nextReqMessageID: that.nextReqMessageID,
					count: that.count
				}).then((res) => {
					if (res.code) {
						this.conversationList = res.data
						console.log(this.conversationList.length, 'length')
						this.conversationList_length = this.conversationList.length
						// obj.user = res.user
						// arr.push(JSON.parse(JSON.stringify(obj)))
					}
				})
				// 历史消息列表
				// let conversationID = this.conversationActive.conversationID
				// let promise = this.tim.getMessageList({
				// 	conversationID: conversationID,
				// 	count: this.count
				// });
				// let that = this;
				// promise.then((res) => {
				// 	that.$store.commit('pushCurrentMessageList', res.data.messageList)
				// 	console.log(res.data,6666666666)

				// 	that.nextReqMessageID = res.data.nextReqMessageID // 用于续拉，分页续拉时需传入该字段。
				// 	that.isCompleted = res.data.isCompleted
				// 	if (res.data.messageList.length) {

				// 		that.scrollToView = "msg-"+res.data.messageList[res.data.messageList.length - 1].ID

				// 	}
				// });


				// var _this = this
				// setTimeout(function() {
				// 	_this.scrollTop = 9999;
				// }, 250);
				// 滚动到底部
				//this.scrollTop = 9999;
				// this.$nextTick(function() {
				// 	//进入页面滚动到底部

				// 	this.$nextTick(function() {
				// 		this.scrollAnimation = true;
				// 	});
				// });
			},
			//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
			setPicSize(content) {
				// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
				let maxW = uni.upx2px(350); //350是定义消息图片最大宽度
				let maxH = uni.upx2px(350); //350是定义消息图片最大高度
				if (content.w > maxW || content.h > maxH) {
					let scale = content.w / content.h;
					content.w = scale > 1 ? maxW : maxH * scale;
					content.h = scale > 1 ? maxW / scale : maxH;
				}
				return content;
			},
			//更多功能(点击+弹出) 
			showMore() {
				this.isVoice = false;
				this.hideEmoji = true;
				if (this.hideMore) {
					this.hideMore = false;
					this.openDrawer();
				} else {
					this.hideDrawer();
					this.mIndex = -1
				}
			},
			// 打开抽屉
			openDrawer() {
				this.popupLayerClass = 'showLayer';
			},
			// 隐藏抽屉
			hideDrawer() {
				this.popupLayerClass = '';
				setTimeout(() => {
					this.hideMore = true;
					this.hideEmoji = true;
					this.mIndex = -1
				}, 150);
			},
			// 选择图片发送
			chooseImage() {
				this.getImage('album');
			},
			//拍照发送
			camera() {
				this.getImage('camera');
			},
			//发红包
			handRedEnvelopes() {
				uni.navigateTo({
					url: 'HM-hand/HM-hand'
				});
				this.hideDrawer();
			},
			//选照片 or 拍照
			getImage(type) {
				console.log(type)
				this.hideDrawer();
				this.mIndex = -1
				var that = this
				// #ifdef APP-PLUS
				uni.chooseImage({
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: [type], // 从相册选择
					success: function(res) {
						console.log('res', res)
						that.sendMsg(res, res.type);
					}
				});
				// #endif
				// #ifndef APP-PLUS
				uni.chooseMedia({
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: [type], // 从相册选择
					success: function(res) {
						console.log('res', res)
						that.sendMsg(res, res.type);
					}
				});
				// #endif

			},
			getVideo() {
				this.hideDrawer();
				var that = this
				uni.chooseMedia({
					mediaType: ['video'],
					sizeType: ['original', 'compressed'],
					success: function(res) {
						console.log('res', res)
						that.sendMsg(res, 'video');
					}
				});
			},
			// 选择表情
			chooseEmoji() {
				this.hideMore = true;
				if (this.hideEmoji) {
					this.hideEmoji = false;
					this.openDrawer();
					this.mIndex = 4
				} else {
					this.hideDrawer();
					this.mIndex = -1
				}
			},
			//添加表情
			addEmoji(em) {
				this.textMsg += em.alt;
			},

			//获取焦点，如果不是选表情ing,则关闭抽屉
			textareaFocus() {
				if (this.popupLayerClass == 'showLayer' && this.hideMore == false) {
					this.hideDrawer();
					this.mIndex = -1
				}
			},
			// 当前账号的冻结信息
			getAccountState(){
				this.$api.default.request('index/getStatus', {
					type: 1,//0冻结动态 1冻结聊天 2冻结橱窗 3抢单权限 4发单权限 5下单权限 6提现权限 7充值权限
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.is_dong = res.is_dong
					}
				})
			},
			// 发送文字消息
			sendText() {
				if(this.is_dong == 1){
					this.$common.errorToShow('您的聊天功能权限已被暂时关停')
					return
				}

				
				this.hideDrawer(); //隐藏抽屉
				this.mIndex = -1
				if (!this.textMsg) {
					return;
				}
				let content = this.replaceEmoji(this.textMsg);
				let msg = {
					text: content
				}
				this.sendMsg(msg, 'text');

				this.textMsg = ''; //清空输入框
				this.handleInputChange()
				//


			},
			//替换表情符号为图片
			replaceEmoji(str) {
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					console.log("item: " + item);
					for (let i = 0; i < this.emojiList.length; i++) {
						let row = this.emojiList[i];
						for (let j = 0; j < row.length; j++) {
							let EM = row[j];
							if (EM.alt == item) {
								//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径 
								//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
								let onlinePath = 'https://s2.ax1x.com/2019/04/12/'
								let imgstr = '<img src="' + onlinePath + this.onlineEmoji[EM.url] + '">';
								console.log("imgstr: " + imgstr);
								return imgstr;
							}
						}
					}
				});
				return replacedStr;
			},

			// 发送消息
			sendMsg(content, type) {
				console.log(content, 123);
				if (type == 'text') {
					var message = this.tim.createTextMessage({
						to: this.toUserId,
						conversationType: 'C2C',
						payload: {
							text: content.text
						}
					});
				}
				if (type == 'image') {
					var message = this.tim.createImageMessage({
						to: this.toUserId,
						conversationType: 'C2C',
						payload: {
							file: content
						},
						onProgress: function(event) {
							console.log('file uploading:', event)
						}
					});
				}

				if (type == 'video') {
					var message = this.tim.createVideoMessage({
						to: this.toUserId,
						conversationType: 'C2C',
						payload: {
							file: content
						},
						onProgress: function(event) {
							console.log('file uploading:', event)
						}
					});
				}

				if (type == 'voice') {
					var message = this.tim.createAudioMessage({
						to: this.toUserId,
						conversationType: 'C2C',
						payload: {
							file: content
						},
						onProgress: function(event) {
							console.log('file uploading:', event)
						}
					});
				}

				this.$store.commit('pushCurrentMessageList', message)
				let pomise = this.tim.sendMessage(message)
				let that = this;

				pomise.then(res => {
					// this.$nextTick(() => {

					// 滚动到底
					that.scrollToView = "msg-" + res.data.message.ID
					// console.log(that.scrollToView,2222222)
					// });
				})

			},
			// 添加文字消息到列表
			addTextMsg(msg) {
				this.msgList.push(msg);
			},
			// 添加语音消息到列表
			addVoiceMsg(msg) {
				this.msgList.push(msg);
			},
			// 添加图片消息到列表
			addImgMsg(msg) {
				// msg.msg.content = this.setPicSize(msg.msg.content);
				// this.msgImgList.push(msg.msg.content.url);
				// this.msgList.push(msg);
				this.msgImgList.push(msg.imageUrl);
			},
			addRedEnvelopeMsg(msg) {
				this.msgList.push(msg);
			},
			// 添加系统文字消息到列表
			addSystemTextMsg(msg) {
				this.msgList.push(msg);
			},
			// 添加系统红包消息到列表
			addSystemRedEnvelopeMsg(msg) {
				this.msgList.push(msg);
			},
			// 打开红包
			openRedEnvelope(msg, index) {
				let rid = msg.content.rid;
				uni.showLoading({
					title: '加载中...'
				});
				console.log("index: " + index);
				//模拟请求服务器效果
				setTimeout(() => {
					//加载数据
					if (rid == 0) {
						this.redenvelopeData = {
							rid: 0, //红包ID
							from: "大黑哥",
							face: "/static/img/im/face/face.jpg",
							blessing: "恭喜发财，大吉大利",
							money: "已领完"
						}
					} else {
						this.redenvelopeData = {
							rid: 1, //红包ID
							from: "售后客服008",
							face: "/static/img/im/face/face_2.jpg",
							blessing: "恭喜发财",
							money: "0.01"
						}
						if (!msg.content.isReceived) {
							// {type:"system",msg:{id:8,type:"redEnvelope",content:{text:"你领取了售后客服008的红包"}}},
							this.sendSystemMsg({
								text: "你领取了" + (msg.userinfo.uid == this.myuid ? "自己" : msg.userinfo
									.username) + "的红包"
							}, 'redEnvelope');
							console.log("this.msgList[index]: " + JSON.stringify(this.msgList[index]));
							this.msgList[index].msg.content.isReceived = true;
						}
					}
					uni.hideLoading();
					this.windowsState = 'show';

				}, 200)
			},

			// 关闭红包弹窗
			closeRedEnvelope() {
				this.windowsState = 'hide';
				setTimeout(() => {
					this.windowsState = '';
				}, 200)
			},
			sendSystemMsg(content, type) {
				let lastid = this.msgList[this.msgList.length - 1].msg.id;
				lastid++;
				let row = {
					type: "system",
					msg: {
						id: lastid,
						type: type,
						content: content
					}
				};
				this.screenMsg(row)
			},
			//领取详情
			toDetails(rid) {
				uni.navigateTo({
					url: 'HM-details/HM-details?rid=' + rid
				})
			},
			// 预览图片
			showPic(msg) {
				uni.previewImage({
					indicator: "none",
					current: msg.content.url,
					urls: this.msgImgList
				});
			},
			showPics(msg) {
				uni.previewImage({
					indicator: "none",
					current: msg,
					urls: [msg]
				});
			},
			// 播放语音
			playVoice(msg) {
				// this.playMsgid = msg.id;
				this.AUDIO.src = msg;
				this.$nextTick(function() {
					this.AUDIO.play();
				});
			},
			// 录音开始
			voiceBegin(e) {
				console.log(e, 'voiceBegin');
				if (e.touches.length > 1) {
					return;
				}
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				this.RECORDER.start({
					format: "mp3"
				}); //录音开始,
			},
			//录音开始UI效果
			recordBegin(e) {
				console.log(e, 'recordBegin');
				this.recording = true;
				this.voiceTis = '松开 结束';
				this.recordLength = 0;
				this.recordTimer = setInterval(() => {
					this.recordLength++;
				}, 1000)
			},
			// 录音被打断
			voiceCancel() {
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true; //不发送录音
				this.RECORDER.stop(); //录音结束
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e) {
				console.log(e, 'voiceIng');
				if (!this.recording) {
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
					this.willStop = true;
					this.recordTis = '松开手指 取消发送'
				} else {
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			// 结束录音
			voiceEnd(e) {
				console.log(e, 'voiceEnd');
				if (!this.recording) {
					return;
				}
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.RECORDER.stop(); //录音结束
			},
			//录音结束(回调文件)
			recordEnd(e) {
				clearInterval(this.recordTimer);
				if (!this.willStop) {
					console.log("e: " + JSON.stringify(e));
					let msg = {
						length: 0,
						url: e.tempFilePath,
						tempFilePath: e.tempFilePath
					}
					let min = parseInt(this.recordLength / 60);
					let sec = this.recordLength % 60;
					min = min < 10 ? '0' + min : min;
					sec = sec < 10 ? '0' + sec : sec;
					msg.length = min + ':' + sec;
					this.sendMsg(msg, 'voice');
				} else {
					console.log('取消发送录音');
				}
				this.willStop = false;
			},
			// 切换语音/文字输入
			switchVoice() {
				this.hideDrawer();
				this.mIndex = -1
				this.isVoice = this.isVoice ? false : true;
			},
			discard() {
				return;
			}
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
			var url = getCurrentPages()
			this.urlPath = '/' + url[0].route
			console.log(this.urlPath);
		},
	}
</script>
<style lang="scss">
	@import "@/static/HM-chat/css/style.scss";

	// /deep/.uni-textarea-wrapper {
	// 	max-height: 100rpx;
	// }
	
	.toonei.display-flex{
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		.headpic{
			width: 30px;
			height: 30px;
			border-radius: 50%;
			flex-shrink: 0;
		}
		.tocen{
			flex-grow: 1;
			padding: 0 18rpx 10rpx;
			.totop{
				display: flex;
				align-items: center;
				padding-bottom: 2rpx;
				.name{
					font-size: 24rpx;
					letter-spacing: 0em;
					color: #3D3D3D;
				}
				.jipic {
					width: 41px;
					height:19px;
				}
				
				.biepic {
					width: 41px;
					height:19px;
					margin-left: 4px;
				}
			}
			
		}
		
		.dian {
			margin-left: 8px;
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background: #45C4B0;
		}
		
		.txt {
			font-size: 20rpx;
			font-weight: normal;
			letter-spacing: 0em;
			padding-left: 8rpx;
			color: #45C4B0;
		}
		
		.dian2{
			margin-left: 8px;
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background: #999;
		}
		.txt2{
			font-size: 20rpx;
			font-weight: normal;
			letter-spacing: 0em;
			padding-left: 8rpx;
			color: #999;
		}
	}
	
	.text-mode{
		max-height: 330rpx;
		
		margin: 10px 0;
		width: 100%;
		border-radius: 26px;
		padding: 0 15rpx;
		box-sizing: border-box;
		background-color: #f2f5f2;
	}

	.new-input-box {
		display: block;

		.textbox {
			margin-top: 0;
		}

		textarea {
			min-height: 52rpx !important;
		}

		.send {
			margin-left: 8rpx;
		}

		.btn {
			width: 60px !important;
			height: 32px !important;
			border-radius: 71px !important;
		}
		
		.menus{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 80rpx;
			height: 80rpx;
			border-radius: 4px;
			
		}
		
		.menusA{
			width: 80rpx;
			height: 80rpx;
			border-radius: 4px;
			background: #F2F5F2;
		}

		.menu-item {
			width: 56rpx;
			height: 56rpx;
		}
	}

	.topSwiper {
		position: relative;
		z-index: 99;
		height: 260rpx;
		;
	}

	.bomt {
		height: 90vh !important;
	}

	.bubble {
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 15rpx;
	}

	.sys_msg_box {
		position: relative;
		margin-top: -25rpx;

		.sys_msg_time {
			font-family: Source Han Sans CN;
			font-size: 10px;
			color: #999999;
			text-align: center;
			padding-bottom: 20rpx;
		}

		.sys_line {
			margin-top: 15rpx;
		}

		.sys_msg_item {
			padding: 0 30rpx;
			background-color: #fff;
			border-radius: 8px;
			font-family: Source Han Sans CN;
			font-size: 12px;
			color: #3D3D3D;
		}

		.sys_tit {
			padding-top: 32rpx;
			font-family: Source Han Sans CN;
			font-size: 14px;
			font-weight: bold;
			color: #3D3D3D;

			text {
				width: 80%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.jubox {
			width: 32rpx;
			height: 32rpx;
		}

		.sys_label {
			font-family: Source Han Sans CN;
			font-size: 12px;
			color: #999999;
			white-space: nowrap;
		}

		.sys_cont {
			width: 80%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

		}

		.sys_detail {
			padding: 32rpx 0;
			font-family: Source Han Sans CN;
			font-size: 14px;
			font-weight: bold;
			color: #3D3D3D;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.mask {
		background: #F2F5F2;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		overflow: hidden;

		.matop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 68rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			background-color: #ffffff;

			.mapic {
				width: 40rpx;
				height: 40rpx;
				flex-shrink: 0;
			}

			.matxt {
				flex-grow: 1;
				font-size: 28rpx;
				padding: 0 16rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
			}
		}

		.qubox {
			line-height: 120rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
			letter-spacing: 0em;
			color: #3D3D3D;
			height: 120rpx;
			opacity: 1;
			background: #FFFFFF;
		}
	}

	.record-popup {
		position: absolute;
		bottom: var(--popup-bottom);
		left: calc(50vw - calc(var(--popup-width) / 2));
		z-index: 1;
		width: var(--popup-width);
		height: var(--popup-height);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		background: var(--popup-bg-color);
		color: #000;
		transition: 0.2s height;

		.inner-content {
			height: var(--popup-height);
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.title {
				font-weight: bold;
				padding: 20rpx 0;
			}

			.tips {
				color: #999;
				padding: 20rpx 0;
			}
		}
	}

	.cancel-icon {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 44rpx;
		line-height: 44rpx;
		background-color: pink;
		border-radius: 50%;
		transform: rotate(45deg);
	}

	.voice-line-wrap {
		display: flex;
		align-items: center;

		.voice-line {
			width: 5rpx;
			height: var(--line-height);
			border-radius: 3rpx;
			margin: 0 5rpx;
		}

		.one {
			animation: wave 0.4s 1s linear infinite alternate;
		}

		.two {
			animation: wave 0.4s 0.9s linear infinite alternate;
		}

		.three {
			animation: wave 0.4s 0.8s linear infinite alternate;
		}

		.four {
			animation: wave 0.4s 0.7s linear infinite alternate;
		}

		.five {
			animation: wave 0.4s 0.6s linear infinite alternate;
		}

		.six {
			animation: wave 0.4s 0.5s linear infinite alternate;
		}

		.seven {
			animation: wave 0.4s linear infinite alternate;
		}
	}

	@keyframes wave {
		0% {
			transform: scale(1, 1);
			background-color: var(--line-start-color);
		}

		100% {
			transform: scale(1, 0.2);
			background-color: var(--line-end-color);
		}
	}

	.new-step-box {
		margin-top: 10rpx;

		.new-step-top {
			display: flex;
			align-items: center;
			justify-content: center;

			.line {
				width: 126rpx;
				height: 6rpx;
				background: #999999;
				border-radius: 0;
			}

			.activeLine {
				background: #45C4B0;
			}

			.stopLine {
				background: linear-gradient(to right, #45C4B0 0%, #999 50%, #ED3232 100%);
			}

			.stopLine2 {
				background: linear-gradient(to right, #45C4B0 0%, #999 100%);
			}
			
			.stopLine3 {
				background: linear-gradient(to right, #ED3232 0%, #ED3232 50%, #ED3232 100%);
			}

			.circle {
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #999999;

				text {
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background-color: #fff;
				}
			}

			.circle.pass {
				background-color: #45C4B0;
			}

			.circle.stop {
				background-color: #ED3232;
			}
		}

		.new-step-bot {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: Source Han Sans CN;
			font-size: 20rpx;
			font-weight: bold;
			color: #999;

			.pass {
				color: #45C4B0;
			}

			.stop {
				color: #ED3232;
			}
		}
	}
</style>